import * as echarts from "echarts";

function initOption(xData, yData, colors, textColor) {
  function getParametricEquation(
    startRatio,
    endRatio,
    isSelected,
    isHovered,
    k,
    height
  ) {
    // 计算
    let midRatio = (startRatio + endRatio) / 2;

    let startRadian = startRatio * Math.PI * 2;
    let endRadian = endRatio * Math.PI * 2;
    let midRadian = midRatio * Math.PI * 2;

    // 如果只有一个扇形，则不实现选中效果。
    if (startRatio === 0 && endRatio === 1) {
      isSelected = false;
    }

    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
    k = typeof k !== "undefined" ? k : 1 / 3;

    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
    let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
    let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

    // 计算高亮效果的放大比例（未高亮，则比例为 1）
    let hoverRate = isHovered ? 1.05 : 1;

    // 返回曲面参数方程
    return {
      u: {
        min: -Math.PI,
        max: Math.PI * 3,
        step: Math.PI / 32,
      },

      v: {
        min: 0,
        max: Math.PI * 2,
        step: Math.PI / 20,
      },

      x: function (u, v) {
        if (u < startRadian) {
          return (
            offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
          );
        }
        if (u > endRadian) {
          return (
            offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
          );
        }
        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
      },

      y: function (u, v) {
        if (u < startRadian) {
          return (
            offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
          );
        }
        if (u > endRadian) {
          return (
            offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
          );
        }
        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
      },

      z: function (u, v) {
        if (u < -Math.PI * 0.5) {
          return Math.sin(u);
        }
        if (u > Math.PI * 2.5) {
          return Math.sin(u);
        }
        return Math.sin(v) > 0 ? 1 * height : -1;
      },
    };
  }

  // 生成模拟 3D 饼图的配置项
  function getPie3D(pieData, internalDiameterRatio) {
    let series = [];
    let sumValue = 0;
    let startValue = 0;
    let endValue = 0;
    let legendData = [];
    let k =
      typeof internalDiameterRatio !== "undefined"
        ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
        : 1 / 3;

    for (let i = 0; i < pieData.length; i++) {
      sumValue += pieData[i].value;

      let seriesItem = {
        name:
          typeof pieData[i].name === "undefined"
            ? `series${i}`
            : pieData[i].name,
        type: "surface",
        parametric: true,
        wireframe: {
          show: false,
        },
        pieData: pieData[i],
        pieStatus: {
          selected: false,
          hovered: false,
          k: k,
        },
      };

      if (typeof pieData[i].itemStyle != "undefined") {
        let itemStyle = {};

        typeof pieData[i].itemStyle.color != "undefined"
          ? (itemStyle.color = pieData[i].itemStyle.color)
          : null;
        typeof pieData[i].itemStyle.opacity != "undefined"
          ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
          : null;

        seriesItem.itemStyle = itemStyle;
      }
      series.push(seriesItem);
    }

    for (let i = 0; i < series.length; i++) {
      endValue = startValue + series[i].pieData.value;
      series[i].pieData.startRatio = startValue / sumValue;
      series[i].pieData.endRatio = endValue / sumValue;
      series[i].parametricEquation = getParametricEquation(
        series[i].pieData.startRatio,
        series[i].pieData.endRatio,
        false,
        false,
        k,
        series[i].pieData.value
      );

      startValue = endValue;

      legendData.push(series[i].name);
    }
    return series;
  }
  //   let colors = ["#9AFC87", "#4A95FF"];
  //   let xData = ["目标经营利润", "实际经营利润"];
  //   let yData = [18, 35];
  let total = yData.reduce((a, b) => a + b);
  // 传入数据生成 option
  let optionsData = [];
  for (let i = 0; i < xData.length; i++) {
    optionsData.push({
      name: xData[i],
      value: yData[i],
      itemStyle: {
        color: colors[i],
      },
    });
  }

  const series = getPie3D(optionsData, 0.8);

  series.push({
    name: "pie2d",
    type: "pie",
    startAngle: -50, //起始角度，支持范围[0, 360]。
    clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
    radius: ["0", "0"],
    center: ["20%", "20%"],
    data: optionsData,
  });
  // 准备待返回的配置项，把准备好的 legendData、series 传入。
  const option = {
    animation: true,
    labelLine: {
      lineStyle: {
        color: "transparent",
      },
    },
    legend: {
      show: true,
      itemWidth: 8,
      itemHeight: 8,
      itemGap: 20,
      bottom: "10%",
      formatter: (title) => {
        const index = xData.findIndex((item) => item === title);
        const than =
          yData[index] > 0 && total > 0
            ? ((yData[index] / total) * 100).toFixed(2) + "%"
            : "0%";
        return `{title|${title} }  {val|${than}}`;
      },
      textStyle: {
        rich: {
          title: {
            fontFamily: "HarmonyOS",
            fontSize: 12,
            fontWeight: 400,
            color: textColor ? textColor : "#cccccc",
          },
          val: {
            fontFamily: "HarmonyOS",
            color: textColor ? textColor : "white",
            fontSize: 14,
            fontWeight: 400,
          },
        },
      },
      data: xData.map((item, index) => ({
        name: item,
        itemStyle: {
          shadowColor: colors[index],
          shadowBlur: 5,
        },
      })),
    },
    label: {
      color: "transparent",
    },
    xAxis3D: {
      min: -1,
      max: 1,
    },
    yAxis3D: {
      min: -1,
      max: 1,
    },
    zAxis3D: {
      min: -1,
      max: 1,
    },
    grid3D: {
      show: false,
      boxHeight: 1,
      top: "-20%",
      left: "28%",
      width: "500",
      height: "250",
      viewControl: {
        alpha: 30,
        autoRotate: true,
        distance: 150,
        zoomSensitivity: 0,
      },
    },
    series: series,
  };
  return option;
}

export default initOption;
